<template>
	<div id="app">
		<nav-bar class="home-nav">
			<div slot="center">
				购物街
			</div>
		</nav-bar>
		<swiper>
			<swiper-item v-for="(item,index) in bannerList" :key=item.title>
				<a href="#" v-if="index == 1">
					<img src="../../assets/img/swiper/lbt1.png" >
				</a>
				<a href="#"  v-else-if="index == 2">
					<img src="../../assets/img/swiper/lbt2.png" >
				</a>
				<a href="#" v-else-if="index == 3">
					<img src="../../assets/img/swiper/lbt3.png" >
				</a>
				<a href="#" v-else>
					<img src="../../assets/img/swiper/lbt4.png" >
				</a>
			</swiper-item>
		</swiper>
	</div>

</template>
<script>
	
	//如果没有index.js文件我们需要这样导入
	/* import Swiper from '../../components/common/swiper/Swiper.vue'
	import SwiperItem from '../../components/common/swiper/SwiperItem.vue' */
	//但是有这个文件我们只需要这样导入就行
	import {
		Swiper,
		SwiperItem
	} from 'components/swiper'
	export default {
		name: "Home",
		components: {
			Swiper,
			SwiperItem
		},
		data() {
			return {
				bannerList: [
					"../../assets/img/swiper/lbt1.png",
					"../../assets/img/swiper/lbt2.png",
					"../../assets/img/swiper/lbt3.png",
					"../../assets/img/swiper/lbt4.png"
				]
			}
		}
</script>

<style scoped>
	.home-nav {
		background-color: #F4A460;
		color: beige;
	}

	#nav {
		height: 200px;
		background-color: #000000;
	}
</style>
